<template>
  <div class="lawyer-modify-num">
    <div class="bg-c-fff">
      <h2 class="box-title rel">修改手机号码</h2>
      <form @submit.prevent="onBindClick">
        <ul>
          <li>
            <span>当前手机号码：</span>
            <span class="old-num">{{phoneNum}}</span>
            <span class="old-num">{{oldPhone}}</span>
          </li>
          <li>
            <span>新手机号码：</span>
            <input type="number" placeholder="请输入新手机号码" class="input-css input-w1" v-model='contactNum'>
            <i class="iconfont icon-asterisk"></i>
          </li>
          <li class="magin-bom">
            <span>数字验证码：</span>
            <input type="text" placeholder="请输入数字验证码" class="input-css input-w2" v-model="numberCode">
            <img :src="numberCodeUrl" class="number-code-img" @click="onNumberCodeImgClick">
          </li>
          <li>
            <span>验证码：</span>
            <input type="text" placeholder="请输入验证码" class="input-css input-w4" v-model="verificationCode">
            <i class="iconfont icon-asterisk"></i>
            <input type="button" :value="countdown | codeText" class="blue-button button" @click="onGetPhoneCode">
            <p class="remarks">修改成功后请使用手机登录</p>
          </li>
          <li>
            <div class="preview-box">
              <input type="submit" value="确定" class="submit button-css cup">
              <input type="button" value="取消" class="submit white-button cup" @click="onCancel">
            </div>
          </li>
        </ul>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      contactNum: '',
      verificationCode: '',
      numberCode: '',
      numberCodeUrl: '/member/verification/code',
      countdown: -1,
      countdownTimer: 0
    }
  },
  methods: {
    onNumberCodeImgClick() {
      this.numberCodeUrl = '/member/verification/code?r=' + Math.random()
    },
    onGetPhoneCode() {
      if (this.countdown > 0) {
        this.$toasted.show('请稍后再重新获取验证码')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.contactNum)) {
        this.$toasted.show('请输入有效手机号')
        return
      }
      if (!this.numberCode) {
        this.$toasted.show('请输入数字验证码')
        return
      }
      this.$http.post('/member/register/code', {
        phone: this.contactNum,
        verifyCode: this.numberCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('验证码已发出，请注意查收')
          this.countdown = 60
          this.countdownTimer = setInterval(() => {
            this.countdown--
              if (this.countdown < 0) {
                this.countdown = 0
                clearInterval(this.countdownTimer)
              }
          }, 1000)
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        console.log('网络出错')
      })
    },
    onBindClick() {
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.contactNum)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (!this.verificationCode) {
        this.$toasted.show('请输入手机验证码')
        return
      }
      this.$http.post('/member/modifyPhone', {
        newPhone: this.contactNum,
        verifyCode: this.verificationCode
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.$toasted.show('手机号码修改成功！')
          this.$router.push('/login')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络出错')
      })
    },
    onCancel() {
      this.$router.push('/welcomelawfirm')
    }
  },
  computed: {
    oldPhone() {
      return this.$store.state.lawyerLoginData.registPhone
    }
  },
  filters: {
    codeText(v) {
      if (v === -1) {
        return '获取验证码'
      } else if (v === 0) {
        return '重新获取'
      } else {
        return '重新获取(' + v + ')'
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.right-box {
  padding: 40px 30px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
}

.lawyer-modify-num ul {
  padding-bottom: 153px;
  margin-top: 50px;
}

.lawyer-modify-num ul li {
  padding: 10px 0;
}

.lawyer-modify-num ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.lawyer-modify-num ul li span.old-num {
  text-align: left;
  padding-left: 18px;
}

.icon-asterisk {
  position: relative;
  right: 35px;
  color: #ec5303;
  font-size: 25px;
  top: 3px;
}

.remarks {
  padding-left: 216px;
  color: #01378c;
  line-height: 17px;
  margin-top: 15px;
}

.preview-box {
  margin-left: 217px;
}

.preview-box .submit {
  width: 164px;
}

.preview-box input:nth-of-type(1) {
  margin-right: 20px;
}

.button {
  width: 130px;
  vertical-align: bottom;
  margin-left: -16px;
}

input::-webkit-input-placeholder {
  color: #a5a5a5;
}

</style>
